<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>属实Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
     <!-- Vue的模板语法有两大类:

        1.插值语法:
            功能:用于解析标签体内容
            写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
        2.指令语法:
            功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....）
            举例:v-bind:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式
            且可以直接读取到data中的所有属性。
            注意:Vue中有很多的指令，且形式都是v-xxx，此处只是v-bind举例
    -->
    <div id="root">

        <h1>插值语法</h1>
        <h1>{{name}}</h1>
        <hr/>
        <h1>指令语法</h1>

        <a v-bind:href="URL" v-bind:x="Hello">跳转</a>  <!-- 这里的v-bind是为了将URL绑定到href属性上 -->
        <!-- 也就是将URL的值（值在data里面定义）赋给href属性，""里面 -->
        <a v-bind:href="URL" :x="Hello">跳转</a>
        <!-- 也可以用简写形式，即v-bind:可以省略为: -->

        <hr>
        
        <h1>我现在在{{school.name}}上学</h1>
        <a v-bind:href="school.URL">目前网址</a>
        <a :href="school.URL">一起看看{{school.name}}学校怎么样</a>
        <h1>具体住在{{school.address}}</h1>
        

    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false; 
        
        new Vue({      
            el:'#root', 
            
            data:{ 
                name:'某某人',
                URL:'https://www.baidu.com', 
                Hello:'Hello World',
                school:{
                    name:'家里蹲大学',
                    address:'铁山靠市无赖区',
                    URL:'https://www.qq.com'
                }      
            }
        }) 



    </script>
</body>
</html>